<template>
  <el-dialog
    :title="title"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
    @open="getData"
  >
    <formTitle title="诉求基本信息" />
    <VForm
      ref="vformComponents"
      :form="formData.form"
      :options="formData.options"
      :rules="formData.rules"
      :labelWidth="formData.labelWidth"
      :rowspan="rowspan"
      @toLoadMethods="toLoadMethods"
    ></VForm>
    <formTitle title="办理过程信息" />
    <VForm
      ref="vformComponents2"
      :form="formData2.form"
      :options="formData2.options"
      :rules="formData2.rules"
      :labelWidth="formData2.labelWidth"
      :rowspan="rowspan"
    ></VForm>
    <formTitle title="回访信息" />
    <VForm
      ref="vformComponents3"
      :form="formData3.form"
      :options="formData3.options"
      :rules="formData3.rules"
      :labelWidth="formData3.labelWidth"
      :rowspan="rowspan"
    ></VForm>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure" v-if="openType!='detail'">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  publicAppealDetail,
  publicAppealUpdate,
  publicAppealAdd,
} from "@/api/risk/publicAppeal";
import { treeDataChild} from '@/api/risk/treeData'
import VForm from "@/components/VForm/index";
import formTitle from '@/components/FormTitle/formTitle.vue';

export default {
  components: {
    VForm,formTitle,
  },
  props: {
    width: {
      type: String,
      default: "70%",
    },
    title: {
      type: String,
      default: "详情",
    },
    id: {},
    openType: {
      type: String,
      default: "add",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    areaTreeOptions: {},
  },
  watch: {
    areaTreeOptions: {
      handler(newVal, oldVal) {
        this.formData.options.forEach((t) => {
          if (t.key == "areaCode") {
            t.option.data = newVal;
          }
        });
        console.log(
          "wstchaa=========this.areaTreeOptions",
          this.areaTreeOptions
        );
      },
      deep: true,
      immediate: true,
    },

    width: {
      handler(newVal, oldVal) {
        console.log("newVal===", newVal, oldVal);
        let w = this.width.split("%")[0];
        if (w >= 60) {
          this.rowspan = 2;
        } else {
          this.rowspan = 1;
        }
      },
      deep: true,
      immediate: true,
    },
    typeOptions: {
      handler(newVal, oldVal) {
        this.formData.options.forEach((t) => {
          if (t.key == "type") {
            t.option.data = newVal;
          }
        });
      },
      deep: true,
      immediate: true,
    },

    bclassifyOptions: {
      handler(newVal, oldVal) {
        this.formData.options.forEach((t) => {
          if (t.key == "bclassify") {
            t.option.data = newVal;
          }
        });
      },
      deep: true,
        immediate: true,
    },
    classNameOptions: {
      handler(newVal, oldVal) {
        this.formData.options.forEach((t) => {
          if (t.key == "className") {
            t.option.data = newVal;
          }
        });
      },
      deep: true,
      immediate: true,
    },
    statusOptions: {
      handler(newVal, oldVal) {
        this.formData.options.forEach((t) => {
          if (t.key == "status") {
            t.option.data = newVal;
          }
        });
      },
      deep: true,
      immediate: true,
    },
    starOptions: {
      handler(newVal, oldVal) {
        this.formData.options.forEach((t) => {
          if (t.key == "followStar") {
            t.option.data = newVal;
          }
        });
      },
      deep: true,
      immediate: true,
    },
    'openType':{
      handler(newVal, oldVal) {
        this.formData.options.forEach(t=>{
          t.disabled =  newVal=='detail'
        })
        this.formData2.options.forEach(t=>{
          t.disabled =  newVal=='detail'
        })
        this.formData3.options.forEach(t=>{
          t.disabled =  newVal=='detail'
        })
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible;
      },
      set() {
        this.close();
      },
    },
  },
  data() {
    return {
      rowspan: 1,
      dict: {},
      formData: {
        form: {
          num: "",
          code: "",
          appealTime: "",
          name: "",
          type: "",
          link: "",
          bclassify: "",
          className: "",
          status: "",
          content: "",
          img: [],
          processMsg: "",
          processUrl: [],
          updateTime: "",
          updateBy: "",
          provinceCode: "",
          cityCode: "",
          countyCode: "",
          areaCode: "",
          follow: {}, //回访数据对象
          followContent: "",
          followName: "",
          followStar: "",
          followTime: "",
          followAppealId: "",
          followId: "",
        },
        options: [
          {
            title: "所属区域",
            key: "areaCode",
            type: "gdAreaSelect",
          },
          {
            title: "上报时间",
            key: "appealTime",
            type: "datetime",
          },
          {
            title: "诉求人",
            key: "name",
            type: "text",
          },
          {
            title: "类型",
            key: "type",
            type: "select",
            multiple: false,
            option: {
              data: this.typeOptions,
              props: {
                key: "id", // 指定key对应data的字段
                label: "label", // 指定label对应data的字段
                value: "name", // 指定value对应data的字段
              },
            },
          },
          {
            title: "联系方式",
            key: "link",
            type: "text",
          },
          {
            title: "状态",
            key: "status",
            type: "select",
            multiple: false,
            option: {
              data: this.statusOptions,
              props: {
                key: "id", // 指定key对应data的字段
                label: "label", // 指定label对应data的字段
                value: "value", // 指定value对应data的字段
              },
            },
          },

          {
            title: "专题大类",
            key: "bclassify",
            type: "select",
            event:'changeBclassify',
            multiple: false,
            option: {
              data: this.bclassifyOptions,
              props: {
                key: "id", // 指定key对应data的字段
                label: "label", // 指定label对应data的字段
                value: "name", // 指定value对应data的字段
              },
            },
          },

          {
            title: "专题细类",
            key: "className",
            type: "select",
            multiple: false,
            option: {
              data: this.classNameOptions,
              props: {
                key: "id", // 指定key对应data的字段
                label: "label", // 指定label对应data的字段
                value: "name", // 指定value对应data的字段
              },
            },
          },

          {
            title: "问题内容",
            key: "content",
            type: "textarea",
            columnWidth: 'w100max',
          },
          {
            title: "问题图片",
            key: "img",
            type: "file",
            fileType: "image",
            listType: "picture-card",
            uploadTextTip: "",
          },
        ],
        rules: {
          num: [{ max: 64, message: "长度最大为64个字符", trigger: "blur" }],
          code: [{ max: 30, message: "长度最大为30个字符", trigger: "blur" }],
          appealTime: [{ required: true, message: "请输入", trigger: "blur" }],
          name: [
            { required: true, message: "请输入", trigger: "blur" },
            { max: 32, message: "长度最大为20个字符", trigger: "blur" },
          ],
          type: [{ required: true, message: "请选择", trigger: "blur" }],
          link: [
            { required: true, message: "请输入", trigger: "blur" },
            { max: 20, message: "长度最大为20个字符", trigger: "blur" },
          ],
          bclassify: [{ required: true, message: "请选择", trigger: "blur" }],
          className: [{ required: true, message: "请选择", trigger: "blur" }],
          status: [{ required: true, message: "请选择", trigger: "blur" }],
          content: [
            { required: true, message: "请输入", trigger: "blur" },
            { max: 500, message: "长度最大为500个字符", trigger: "blur" },
          ],
          img: [],
          processMsg: [
            { max: 500, message: "长度最大为500个字符", trigger: "blur" },
          ],
          processUrl: [],
        },
        labelWidth: "140px",
      },
      formData2: {
        form: {
          processMsg: "",
          processUrl: [],
        },
        options: [
          {
            title: "办理过程情况",
            key: "processMsg",
            type: "textarea",
            columnWidth: 'w100max',
          },
          {
            title: "办理过程图片",
            key: "processUrl",
            type: "file",
            fileType: "image",
            listType: "picture-card",
            uploadTextTip: "",
          },
        ],
        rules: {
          processMsg: [
            { max: 500, message: "长度最大为500个字符", trigger: "blur" },
          ],
          processUrl: [],
        },
        labelWidth: "140px",
      },
      formData3: {
        form: {
          follow: {}, //回访数据对象
          followContent: "",
          followName: "",
          followStar: "",
          followTime: "",
          followAppealId: "",
          followId: "",
        },
        options: [
          {
            title: "回访记录",
            key: "followContent",
            type: "textarea",
            columnWidth: 'w100max',
          },
          {
            title: "回访人",
            key: "followName",
            type: "text",
          },
          {
            title: "回访时间",
            key: "followTime",
            type: "datetime",
          },
          {
            title: "用户满意度",
            key: "followStar",
            type: "select",
            multiple: false,
            option: {
              data: this.starOptions,
              props: {
                key: "id", // 指定key对应data的字段
                label: "label", // 指定label对应data的字段
                value: "value", // 指定value对应data的字段
              },
            },
          },
        ],
        rules: {
          followContent: [

            { max: 500, message: "长度最大为500个字符", trigger: "blur" },
          ],
          followName: [

            { max: 20, message: "长度最大为20个字符", trigger: "blur" },
          ],
          followStar: [],
          followTime: [],
        },
        labelWidth: "140px",
      },
      // 字典
      typeOptions: [],
      bclassifyOptions: [],
      classNameOptions: [],
      statusOptions: [],
      starOptions: [],
    };
  },
  methods: {

    toLoadMethods(methods){
      this[methods]();
    },
    changeBclassify(){
      this.formData.form.className='';
      this.classNameOptions=[]
      this.sendBclassifyData();
    },

    async sendBclassifyData() {
      let queryData = {}
      queryData.name = 'hazardBClassify';
      queryData.code = this.formData.form.bclassify;
      let res = await treeDataChild(queryData);
      if (res.code == 200) {
        let that = this
        res.data.forEach(function (item, index) {
          var one = {}
          one.label = item.label;
          one.name = item.code;
          that.classNameOptions.push(one);
        })
      }
    },

    submitFormat() {
      // if(this.formData.form.img==null||this.formData.form.img==''){
      //   this.formData.form.img="[]";
      // }else{
      //
      // }
      this.formData.form.img = JSON.stringify(this.formData.form.img);
      // if(this.formData.form.processUrl==null||this.formData.form.processUrl==''){
      //   this.formData.form.processUrl="[]";
      // }else{
      //
      // }
      this.formData2.form.processUrl = JSON.stringify(this.formData2.form.processUrl);

    },
    loadFormat() {
      if(this.formData.form.img!=null){
        this.formData.form.img = JSON.parse(this.formData.form.img).map(
          (item) => {
            return {
              name: item.name,
              url:
                process.env.VUE_APP_BASE_API + "file/api/download/" + item.fileId,
              uid: item.uuid,
              fileId: item.fileId,
            };
          }
        );
      }else {
        this.formData.form.img = []
      }

      if(this.formData2.form.processUrl!=null){
        this.formData2.form.processUrl = JSON.parse(
          this.formData2.form.processUrl
        ).map((item) => {
          return {
            name: item.name,
            url:
              process.env.VUE_APP_BASE_API + "file/api/download/" + item.fileId,
            uid: item.uuid,
            fileId: item.fileId,
          };
        });
      }else {
        this.formData2.form.processUrl = []
      }


    },
    getCheckBoxData(value, option, type) {
      if (type == "submit") {
        if (value.length == 0) {
          return null;
        }
        let temp = [];
        value.forEach((t) => {
          let item = option.find((x) => x.label == t);
          if (item != undefined) {
            temp.push(item.value);
          }
        });
        return temp.join(",");
      } else {
        if (!value) {
          return [];
        } else {
          let data = value.split(",");
          let temp = [];
          data.forEach((t) => {
            let item = option.find((x) => x.value == t);
            if (item != undefined) {
              temp.push(item.label);
            }
          });
          return temp;
        }
      }
    },
    sure() {
      console.log("sure===", this.formData.form);


      this.$refs.vformComponents.$refs.form.validate().then((res) => {
        if (this.formData.form.areaCode) {
          let temp = this.formData.form.areaCode;
          this.formData.form.provinceCode = temp[0];
          this.formData.form.cityCode = temp[1];
          this.formData.form.countyCode = temp[2];
          if(this.formData.form.countyCode!=''){
            this.formData.form.areaCode = temp[2]
          }else{
            if(this.formData.form.cityCode!=''){
              this.formData.form.areaCode = temp[1]
            }else{
              this.formData.form.areaCode =temp[0]
            }
          }
        }
        this.submitFormat();
        if (this.openType == "add") {
          this.add();
        } else {
          this.update();
        }
      });
    },
    add() {
      this.formData.form.id = null;
      this.formData.form.delFlag = 0;

			this.formData3.form.follow = this.formData.form.follow
      this.formData3.form.follow.content = this.formData3.form.followContent;
      this.formData3.form.follow.name = this.formData3.form.followName;
      this.formData3.form.follow.star = this.formData3.form.followStar;
      this.formData3.form.follow.followTime = this.formData3.form.followTime;
			let reqdata = {
				...this.formData.form,
				...this.formData2.form,
				follow: this.formData3.form.follow
			}

      publicAppealAdd(reqdata).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: this.$t("tips.createSuccess"),
            type: "success",
          });
          this.closeSuccess();
        } else {
          this.$message({
            message: this.$t("tips.systemException"),
            type: "error",
          });
        }
      });
    },
    update() {
      this.formData3.form.follow = this.formData.form.follow
      this.formData3.form.follow.content = this.formData3.form.followContent;
      this.formData3.form.follow.name = this.formData3.form.followName;
      this.formData3.form.follow.star = this.formData3.form.followStar;
      this.formData3.form.follow.followTime = this.formData3.form.followTime;
			let reqdata = {
				...this.formData.form,
				...this.formData2.form,
				follow: this.formData3.form.follow
			}

      publicAppealUpdate(reqdata).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: this.$t("tips.updateSuccess"),
            type: "success",
          });
          this.closeSuccess();
        } else {
          this.$message({
            message: this.$t("tips.systemException"),
            type: "error",
          });
        }
      });
    },
    cancel() {
      this.close();
    },
    handleClose(done) {
      done();
      this.close();
    },
    closeSuccess() {
      this.$refs.vformComponents.$refs.form.resetFields();
      this.$refs.vformComponents2.$refs.form.resetFields();
      this.$refs.vformComponents3.$refs.form.resetFields();
      this.$emit("success");
    },
    close() {
      this.$refs.vformComponents.$refs.form.resetFields();
      this.$refs.vformComponents2.$refs.form.resetFields();
      this.$refs.vformComponents3.$refs.form.resetFields();
      this.$emit("close");
    },
    getData() {
      this.typeOptions = [];
      this.$commonJs.filterDataDict("publicAppealType", this.typeOptions);

      this.statusOptions = [];
      this.$commonJs.filterDataDict("publicAppealStatus", this.statusOptions);

      this.bclassifyOptions = [];
      this.$commonJs.filterDataDict("hazardBClassify", this.bclassifyOptions);

      this.classNameOptions = [];
      //this.$commonJs.filterDataDict("publicAppealClassName",this.classNameOptions);


      this.starOptions = [];
      this.$commonJs.filterDataDict("publicFollowStar", this.starOptions);
			this.formData3.options.forEach(t=>{
				if(t.key=='followStar'){
					t.option.data = this.starOptions
				}
			})

      if (this.openType != "add") {
        publicAppealDetail(this.id).then((res) => {
          if (res.code == 200) {
            this.formData.form = res.data;
						// this.$set(this.formData2.form, "processMsg", res.data.processMsg);
						// this.$set(this.formData2.form, "processUrl", res.data.processUrl);
						this.formData2.form.processMsg = res.data.processMsg
            this.formData2.form.processUrl = res.data.processUrl
            if (res.data.follow == null) {
              this.formData.form.follow = {};
              this.formData.form.follow.appealId = this.formData.form.id;
            } else {
							this.formData3.form.follow = res.data.follow
              this.$set(
                this.formData3.form,
                "followContent",
                res.data.follow.content
              );
              this.$set(this.formData3.form, "followName", res.data.follow.name);
              this.$set(this.formData3.form, "followStar", res.data.follow.star);
              this.$set(
                this.formData3.form,
                "followTime",
                res.data.follow.followTime
              );
            }
            this.formData.form.areaCode = [
              res.data.provinceCode,
              res.data.cityCode,
              res.data.countyCode,
            ];
            this.sendBclassifyData();
            this.loadFormat();



          } else {
            this.$message({
              message: this.$t("tips.systemException"),
              type: "error",
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
